<!-- 列表的UI -->
<script>
  import { getContext, setContext } from 'svelte'
  import { push } from 'svelte-spa-router'
  export let name, amount, id
  let displayAmount = false
  const handleToggle = () => {
    displayAmount = !displayAmount
  }
  const removeCourse = getContext('rm')

  const onEdit = id => {
    push(`/add/${id}`)
  }

  setContext('test', 123)
</script>

<article class="single-course">
  <div class="course-info">
    <h2>
      {name}
      <button class="amount-btn" on:click={handleToggle}>
        <i class="fa" class:fa-caret-down={displayAmount} class:fa-caret-right={!displayAmount} />
      </button>
    </h2>
    {#if displayAmount}
      <h4>价格: {amount}</h4>
    {/if}
  </div>
  <div class="course-buttons">
    <button class="course-btn edit-btn" on:click|preventDefault={() => onEdit(id)}>
      <i class="fa fa-pencil" />
    </button>
    <button class="course-btn delete-btn" on:click={removeCourse(id)}>
      <i class="fa fa-trash" />
    </button>
  </div>
</article>
